<template>
    <div class = "teaminfomain">
        <p class= "teaminfohead"><i class="el-icon-s-promotion"> 球队详情 > {{teaminfo.city}}{{teaminfo.name}}</i></p>
     <div class="teaminfo">
            <div class="teaminformation">
                
                <div class="informationleft">
                  <img :src="teaminfo.cover" alt="">
                  <ul>
                   <li>进入NBA ：{{teaminfo.entryTime}}年</li>
                   <li>老板：{{teaminfo.boss}}</li> 
                   <li>主教练：{{teaminfo.coach}}</li>  
                   <li>赛区{{teaminfo.division}}</li>
                   <li>简介：{{teaminfo.introduction}}</li> 
                  </ul>  
                </div>
                <span style ="display:inline-block;height:150px;border:0.5px solid rgb(238,238,238);width:0.5px;margin-left:51%;margin-top:50px"></span>

                <div class="informationright">

                    <p style="top:-100px;left:10%;font-size:18px;font-weigh:300">{{teambasic.win}} 胜</p>
                    <p style="top:-100px;left:72%;font-size:18px;font-weigh:300">{{teambasic.fail}} 负</p>
                   <el-progress :text-inside="true" :stroke-width="15" :percentage="this.winrate" style="left:10%;top:-80px"></el-progress>
                   <p style="top:-55px;left:35%;font-size:13px;color:gray">{{teambasic.season}}年{{teambasic.stage==0?'常规赛':(teambasic.stage==1?'总决赛':'季后赛')}}</p>
                </div>

            </div>

        <div class="teambasic">
          <p class="teambasichead">基本数据 </p>
          <ul>
             <li> <span>{{teambasic.score}} </span><br/>场均得分</li>
             <li> <span>{{teambasic.loseScore}} </span> <br/>场均失分</li>
             <li> <span>{{teambasic.rebounds}} </span> <br/>场均篮板</li>
             <li> <span>{{teambasic.assists}} </span><br/>场均助攻</li>
             <li> <span>{{teambasic.steals}} </span> <br/>场均抢断</li>
             <li> <span>{{teambasic.block}} </span> <br/>场均盖帽</li>
             <li> <span>{{teambasic.shootPercentage}} </span><br/>投篮命中率</li>
             <li> <span>{{teambasic.threePercentage}} </span> <br/>三分命中率</li>
             <li> <span>{{teambasic.freePercentage}} </span> <br/>罚球命中率</li>
             <li> <span>{{teambasic.fault}} </span><br/>场均失误</li>
             <li> <span>{{teambasic.foul}} </span> <br/>场均犯规</li>
             <li> <span>{{teambasic.pna}} </span> <br/>正负值</li>
             <li> <span>{{teambasic.alternate}} </span><br/>替补得分</li>
          </ul>
         </div>
           <div class="teamadvance">
          <p class="teamadvancehead">进阶数据 </p>
          <ul>
             <li> <span>{{teamadvance.attackEfficiency}} </span><br/>进攻效率</li>
             <li> <span>{{teamadvance.defenseEfficiency}} </span> <br/>防守效率</li>
             <li> <span>{{teamadvance.trueShot}}%</span> <br/>真实命中率</li>
             <li> <span>{{teamadvance.rounds}} </span><br/>场均回合</li>
             <li> <span>{{teamadvance.errorRate}}%</span> <br/>失误率</li>
             <li> <span>{{teamadvance.freeRate}}%</span> <br/>罚球率</li>
             <li> <span>{{teamadvance.scoreByerror}} </span><br/>利用对方失误的得分</li>
             <li> <span>{{teamadvance.opposeShot}}% </span> <br/>对手命中率</li>
          </ul>
         </div>

         
     </div>
     
    
  

      <div class="paiming">
      <span id="dongbu">东部</span>
      <span id="xibu">西部</span>
      <br>
      <hr class="bb">
      <hr class="aa">
      <el-table id="dong"
      :data="dongzhanji"
      style="width: 100%" 
      size="mini" >
      <el-table-column
        prop="cover"
        >
        <template slot-scope="scope" >
        <img :src="scope.row.cover" alt=""   @click="info(scope.row.id)" >
        </template>
      </el-table-column>

      <el-table-column
        prop="name">
        <template slot-scope="scope"  > 
           <p @click="info(scope.row.id)">{{scope.row.name}}</p> 
        </template>
      </el-table-column>

    </el-table>
    <el-table id="xi"
      :data="xizhanji"
      style="width: 100%;"
      size="mini"
  >
     <el-table-column
        prop="cover"
        >
        <template slot-scope="scope" >
        <img :src="scope.row.cover" alt=""   @click="info(scope.row.id)" >
        </template>
      </el-table-column>

      <el-table-column
        prop="name">
        <template slot-scope="scope"  > 
           <p @click="info(scope.row.id)">{{scope.row.name}}</p> 
        </template>
      </el-table-column>
    </el-table>
    </div>
    </div>
</template>

<script>
import team from '@/api/team'
import moment from 'moment'
import $ from 'jquery'
import index from '@/api/index'
export default {
    data() {
        return{
            teaminfo:{},
            teambasic:{},
            teamadvance:{},
            winrate:0,
            dongzhanji:[],
            xizhanji:[],
        }
      },
      mounted(){
          this.getteaminfo()
          this.getteambasic()
          this.getteamadvanced()
          this.getdongzhanji()
          this.getxizhanji()
      $(function () {
        $("#dongbu").hover(function(){
        $("#xi").css("display", "none");
        $("#dong").css("display", "block");
        $(this).css("color","rgb(0,107,183)")
        $("#xibu").css("color","black")
        $(".aa").css("margin-left","0px")
         $(".aa").css("background-color","rgb(0,107,183)")
      })
       $("#xibu").hover(function(){
        $("#dong").css("display", "none");
        $("#xi").css("display", "block");
        $(this).css("color","red")
        $("#dongbu").css("color","black")
        $(".aa").css("margin-left","50%")
        $(".aa").css("background-color","red")
      })
    })
      },
       methods: {
           info(id){
                this.$router.push({ path:'/team/'+id  })
           },
           getteaminfo(){
               team.getteaminfo(this.$route.params.id)
               .then(response => {
                   this.teaminfo = response.data.teamInformation

               })
           },
           
            getdongzhanji(){
            index.getdongzhanji()
            .then(response => {
            this.dongzhanji = response.data.dongzhanji
            })
          },
            getxizhanji(){
                index.getxizhanji()
                .then(response => {
                this.xizhanji = response.data.xizhanji
                })
            },
           getteambasic(){
               team.getteambasic(this.$route.params.id)
               .then(response =>{
                    this.teambasic = response.data.teambasic
                    this.winrate = Math.floor(this.teambasic.win/(this.teambasic.win+this.teambasic.fail)*100)
               })
           },
             getteamadvanced(){
               team.getteamadvanced(this.$route.params.id)
               .then(response =>{
                    this.teamadvance = response.data.teamadvanced
               })
           },
        }
}
</script>

<style scoped>

.teaminfohead{
    font-size:18px;
    margin-left:10%;
}
.teaminfomain{
   width:100%;
   background-color: rgb(238,238,238);
   padding-top:80px;
   display: inline-block;
   overflow: hidden;
   min-height: 1000px;
}
.el-icon-s-promotion{
    color:rgb(0,98,161)
}
.teaminfo{
   width: 60%;
   min-height:800px;
   background-color:white;
   margin-left:10%;
   box-shadow: 0 0 10px #ddd;
   margin-top: 30px;
}
.teaminformation{
    width:100%;
    border-top: 5px solid rgb(4,124,255);
}
.informationleft{
    position: relative;
    width: 50%;
    display: inline-block;
}
.informationleft img{
    position: absolute;
    width: 150px;
    left: 50px;
    top: 20px;
}
.informationleft ul{
    list-style: none;
    position: absolute;
    left: 200px;
    top: 20px;
}
.informationleft li{
    height: 30px;
    width: 90%;
}
.informationright{
    width:48%;
    display: inline-block;
    position: relative;
}
.informationright p{
    position: absolute;
  
}
>>>.el-progress-bar__innerText{
    font-size: 0;
}
>>> .el-progress-bar{
    width: 70%; 
    height:5px;
}
>>> .el-progress-bar__outer{
    background-color: rgb(223,10,23);
}
>>> .el-progress-bar__inner{
    border-radius:0;
}

.teambasic{
    width:100%;
    min-height:200px;
    margin-top:20px
}
.teambasichead{
  font-size: 20px;
  border-left:4px solid rgb(4,124,255);
  text-align: left;
  padding-left:8px;
  margin-left: 30px;
  margin-top:60px ;
}
.teambasic ul{
    list-style: none;
    margin-top:20px;
}
.teambasic li{
    float: left;
    width:100px;
    text-align:center;
    height:70px;
}
.teambasic li span{
    font-size:20px;
    font-weight:700;
}
.teamadvance{
    width:100%;
    min-height:200px;
    margin-top:20px;
}
.teamadvancehead{
  font-size: 20px;
  border-left:4px solid rgb(4,124,255);
  text-align: left;
  padding-left:8px;
  margin-left: 30px;
  margin-top:60px ;
}
.teamadvance ul{
    list-style: none;
    margin-top:20px;
}
.teamadvance li{
    float: left;
    width:100px;
    text-align:center;
    height:70px;
}
.teamadvance li span{
    font-size:20px;
    font-weight:700;
}

.paiming{
  width: 15%;
  height: auto;
  position: absolute;
  top: 235px;
  right: 12%;
  background-color:white;
  margin-left:10%;
  box-shadow: 0 0 10px #ddd;
 border-top: 5px solid rgb(4,124,255);
}



.paiming span{
  display: block;
  float: left;
  font-size: 16px;
  width:50%;
  text-align: center;
  cursor: pointer;
  padding-top:10px;
  font-weight: 400;
}
.paiming img{
    width:35px;
    z-index: 15;
}
.bb{
  height: 1px;
  width: 100%;
  display:block;
  background-color: gainsboro;
}
>>> .el-table thead{
  display: none;
}
>>> .el-table__row td{
    border-bottom: 0;
    text-align: center;
    font-size: 13px;
    vertical-align: top;
    cursor: pointer;
    height:44px
}
#xi{
  display:none;
}
.aa{
  width: 50%;
  height: 1px;
  background-color:rgb(0,107,183);
  position: absolute;
  top: 20px;
  z-index: 5;
}
</style>